HTML5. ולמערכות Web הדור הבא

Size: px

Start display at page:

Download "HTML5. ולמערכות Web הדור הבא"

Joel May
6 years ago
Views:

1 HTML5 המדריך לבניית אתרים ולמערכות Web הדור הבא מהדורה שנייה יונית רושו

2 יועץ מקצועי: זהר עמיהוד עריכה ועיצוב: שרה עמיהוד, יצחק עמיהוד עיצוב עטיפה: אופיר ליברמן שמות מסחריים שמות המוצרים והשירותים המוזכרים בספר הינם שמות מסחריים רשומים של החברות שלהם. הוצאת הוד-עמי והמחברת עשו כמיטב יכולתם למסור מידע אודות השמות המסחריים המוזכרים בספר זה ולציין את שמות החברות, המוצרים והשירותים. שמות מסחריים רשומים ) registered (trademarks המוזכרים בספר צוינו בהתאמה. הודעה ספר זה מיועד לתת מידע אודות מוצרים שונים. נעשו מאמצים רבים לגרום לכך שהספר יהיה שלם ואמין ככל שניתן, אך אין משתמעת מכך כל אחריות שהיא. המידע ניתן "כמות שהוא" is").("as הוצאת הוד-עמי והמחברת אינם אחראים כלפי יחיד או ארגון עבור כל אובדן או נזק אשר ייגרם, אם ייגרם, מהמידע שבספר זה, או מהתקליטור/הדיסקט (אם יצורף), או מאתר האינטרנט המלווה את הספר. אין לעשות שימוש מסחרי ו/או להעתיק, לשכפל, לצלם, לתרגם, להקליט, לשדר, לקלוט ו/או לאחסן במאגר מידע בכל דרך ו/או אמצעי מכני, דיגיטלי, אופטי, מגנטי ו/או אחר - בחלק כלשהו מן המידע ו/או התמונות ו/או האיורים ו/או כל תוכן אחר הכלולים ו/או שצורפו לספר זה, בין אם לשימוש פנימי או לשימוש מסחרי. כל שימוש החורג מציטוט קטעים קצרים במסגרת של ביקורת ספרותית אסור בהחלט, אלא ברשות מפורשת בכתב מהמוציא לאור. לשם שטף הקריאה כתוב ספר זה בלשון זכר בלבד. ספר זה מיועד לגברים ונשים כאחד ואין בכוונתנו להפלות או לפגוע בציבור המשתמשים/ תו. (C) כל הזכויות שמורות הוצאת הוד-עמי בע"מ טלפון: info@hod-ami.co.il מהדורה שנייה לספר HTML5 המדריך לבניית אתרים הדור הבא הודפס בישראל 11/2014 מסת"ב ISBN

3 הספר מוקדש באהבה לבעלי היקר אורן ולילדים שלי - שקד, דניאל וירין רושו, על כך שנתתם לי את הכוח ותמכתם לכל אורך הדרך

5 תוכן עניינים מקוצר הקדמה פרק 1: מבוא ומושגים באינטרנט פרק 2: יסודות ועקרונות שפת HTML(5) פרק 3: תגיות המבנה החדשות פרק 4: הגדרות עיצוב על ידי CSS פרק 5: מודל הקופסה ופריסות פרק 6: קוד מינימליסטי ובעל משמעות פרק פרק 8: פרק 9: 7: טפסים ב- HTML נושאים מתקדמים CSS ו- Javascript Jquery פרק 10: שילוב מדיה והאובייקט Canvas פרק 11: נושאים מתקדמים API פרק 12: מובייל ורספונסיביות אינדקס תוכן עניינים 5

6 תוכן עניינים הקדמה מבנה הספר קהל היעד קטעי הקוד על יונית רושו...20 פרק 1: מבוא ומושגים באינטרנט כתובות של מחשבים ברשת האינטרנט...22 טכנולוגיית שרת לקוח...22 הדפדפן פרוטוקול 23...HTTP פרוטוקול FTP אחסון האתר...23 דומיין תת-דומיין (HyperText Markup Language) HTML סיכום...24 פרק 2: יסודות ועקרונות שפת HTML(5) מה זה?HTML במה שונה HTML5 מהגרסאות הקודמות? תמיכת דפדפנים...27 דף HTML5 הראשון שלך...27 תגיות, מאפיינים ואלמנטים בסיסיים של השפה התגית: אבן היסוד של כל דף...31 HTML מבנה סטנדרטי של מסמך :HTML5 תגיות היסוד הצהרה על HTML5 :DOCTYPE התגית <html> התגית 33...<head> התגית <title> התגית 33...<body> HTML5 מהד' 2 6

7 התגית 34...<section> תגיות נפוצות נוספות להגדרת אזורים בדף...35 עברית בדפי אינטרנט...35 תוכן טקסטואלי...36 הכרת המושג כותרות...36 תגיות הכותרת תגית הפ ס קה <p>...39 תגיות בסיסיות לעיצוב הטקסט חוקיות הפתיחה והסגירה של תגית בתוך תגית...39 התוכן שבין התגיות להיכן נעלמו הרווחים בין המילים ובין השורות?...40 רווח קשיח מעבר שורה 42...<br> שילוב תווים מיוחדים בתוכן שבין התגיות - Characters...42 ASCII מאפיינים לתגיות - Attributes סיכום: התקניות הנדרשת במסמכי 44...HTML5 תרגיל קישורים תגית הקישור a...51 המאפיין href המאפיין 52...target המאפיין 52...rel המאפיין media קישור לדואר אלקטרוני...53 mailto קישור למסמך Word שנמצא באותה תיקייה...54 קישור לדף אחר באתר שלי שנמצא באותה התיקייה קישור פנימי בתוך דף 54...Anchors- התגית base תרגיל צבעים ורקע רשימות ותבליטים רשימות תבליטים לא ממוספרות...61 רשימות תבליטים ממוספרות רשימת הגדרות - list Definition מאפיינים (attributes) של רשימות...63 תוכן עניינים 7

8 המאפיין reversed המאפיין 63...start שינוי מראה הרשימה שילוב תמונות בדף מידע כללי JPG GIF קבצי GIF ANIMATION PNG התגית img סידור סביבת העבודה - התיקייה...74 images נתיבי קבצי תמונות נתיב יחסי path) (Relative נתיב מוחלט path) (Absolute שילוב תמונה מתיקיית התמונות באתר...75 תמונה כקישור...75 הוספת תמונת רקע תרגיל טבלאות...81 תאים ריקים בטבלה...82 מרווחים בין תאים ובתוך התאים...83 סיכום...85 פרק 3: תגיות המבנה החדשות תגיות חדשות ב- HTML5 ליצירת מבניות בעלת משמעות...88 התגית <header> התגית <footer> התגית 90...<section> התגית <article> התגית 91...<nav> התגית 92...<main> התגית <aside> אזורים יעודיים...93 תגיות חדשות נוספות...95 התגית <figure> HTML5 מהד' 2 8

9 התגית 95...<figcaption> התגית 96...<mark> מודל התוכן של 97...HTML5 אלמנטים מסוג Block-level ומסוג...97 Inline ה- DOM ומודל התוכן החדש: 7 הקטגוריות הראשיות Metadata Flow Heading Phrasing Embedded Interactive Sectioning אלגוריתם קווי המתאר של התוכן algorithm) (Outline תמיכה בדפדפנים שאינם תומכים ב- HTML תרגיל סיכום פרק 4: הגדרות עיצוב על ידי CSS מה זה...?CSS 105 גרסאות של... CSS 109 היכן כותבים את הגדרות...?CSS 109 הגדרת העיצוב ישירות בתגית :HTML שיטת... Inline 110 הגדרות צבע בשיטת Inline ובאופן כללי הבעיה בשיטת... Inline 113 הפתרון: שיטת...Internal 113 הגדרת העיצוב בראש המסמך באופן גורף: התגית...<style> 114 הבעיה בשיטת תגית <style> הפתרון השיטה השלישית והנבחרת: קובץ CSS חיצוני מה עושה הדפדפן? דוגמאות... CSS 117 הגדרות CSS שימושיות לפי נושאים רקעים background-color צבע רקע background-image תמונת רקע תוכן עניינים 9

10 - background-position מיקום תמונת רקע background-repeat שכפול תמונת רקע מסגרות border-width עובי מסגרת border-style סגנון מסגרת border-color צבע מסגרת טיפוגרפיה: הגדרות עיצוב עבור טקסטים וגופנים שימוש בטקסט 'חי' Web-safe fonts גופן מערכת font-size,font-family,color צבע הגופן, משפחה וגודל font-style סגנון הגופן font-weight עובי הגופן direction כיוון הטקסט letter-spacing רווח בין אותיות line-height גובה שורה text-align יישור טקסט vertical-align יישור אנכי word-spacing רווח בין מילים... - צורת הגופן עיצוב קישורים text-decoration קישוט הטקסט lists עיצוב רשימות שוליים margin שוליים חיצוניים padding שוליים פנימיים גדלים: רוחב וגובה איחוד הגדרות למספר תגיות תרגיל 5 שלב הגדרות עיצוב שאינו גורף:...Class 131 המשך תרגיל - 5 שלב סדרי עדיפויות של הגדרות עיצוב כוכבית שימוש בשם, המאפיין... id 136 אזורים יעודיים בדף אינטרנט או ביישום שימוש בשתי מחלקות (classes) לאותו אלמנט HTML5 מהד' 2 10

11 קישורים אינטראקטיביים Hover שינוי עיצוב במעבר עכבר מעל קישור Visited שינוי עיצוב של קישור לאחר ביקור בו יעילות הכתיבה של מסמכי...CSS 138 שימוש ב- CLASS במידה עמידה בשני תנאים: הגדרת סוג תגית וגם שימוש ב- class היררכיה ב- CSS, או קינון תגיות ההבדל בין 'צאצאים' לבין 'ילדים' מדור ראשון תגית שעוקבת אחרי תגית אחרת תגיות שנמצאות לאחר תגית מסוימת תגיות בעלות מאפיין מסוים תגיות עם מאפיין בעל ערך מסוים שימוש בהערות סיכום פרק 5: מודל הקופסה ופריסות מבנה ופריסת הדף מודל הקופסה - model... Box 149 איחוד שוליים אנכיים - collapse...margin 152 תגית מתחת לתגית הכלת תגית בתוך תגית אחרת איחוד שוליים בתוך אותו האלמנט הגדרות תצוגת Inline ותצוגת... Block 156 אלמנטים עם תצוגת... Block 156 אלמנטים עם תצוגת...Inline 157 מיקום אלמנטים זרימה רגילה של הדף - flow...normal 158 מיקום יחסי - positioning...relative 159 מיקום מוחלט - positioning...absolute 160 דוגמה שימושית מיקום מקובע - positioning... Fixed 165 אלמנטים "צפים" -...Floating 165 מסך צר של מכשיר נייד תג הפסקת ציפה - Clear יישור אופקי תוכן עניינים 11

12 יישור באמצעות שוליים אוטומטיים יישור של טקסט בתוך אלמנטים לעומת יישור של אלמנטים דפדפנים ישנים למישהו? תרגיל סיכום פרק 6: קוד מינימליסטי ובעל משמעות למה הכוונה קוד בעל משמעות? הפרדת התוכן והמשמעות מהתצוגה מינימליזם בקוד סיכום פרק 7: טפסים ב- HTML מהו הטופס ומהי מטרתו? טכנולוגיה ועיצוב יד ביד החשיבות של תכנון ועיצוב הטפסים השפעת התפתחות העיצוב והטכנולוגיה על טפסים ב- HTML לאן נשלחים הנתונים מהטופס, וכיצד סדנת עבודה התגית <form> ומבנה טופס מבנה הטופס התגית <label> הפקדים הפקדים הבסיסיים: פקדי תיבת טקסט ושליחת הנתונים...input 201 פקדי קלט נוספים עבור טקסטים ומספרים פקד אזור טקסט,... Textarea 208 פקד הלחצן -...button 209 פקדי בחירה תיבת סימון - box... check 210 פקדי רדיו - buttons... radio 211 רשימה נגללת -...select 213 פקד להעלאת קובץ - upload...file 214 עיצוב הפקדים והטופס בכללותו פקד "שלח" (submit) מעוצב עם תמונה התגיות <fieldset> ו-...<legend> 215 HTML5 מהד' 2 12

13 התגית <details> ניהול המידע התגית <datalist> התגית...<datagrid> 217 הקוד לבניית הטופס סיכום פרק 8: נושאים מתקדמים CSS3 תמונות רקע, חזרה ודגשים הגדרת תמונת רקע עבור מעברי צבע מיקום תמונת רקע מיקום על פי פיקסלים מיקום באחוזים עיצוב קישורים מתקדם קו תחתון בעיצוב אישי טכניקות להקטנת מספר המחלקות (classes) הדגשת קישורים מסוגים שונים תפיסת התחלת מחרוזת הערך תפיסת סוף מחרוזת הערך מעברי עכבר יעילים מעל קישורים מעברי עכבר פשוטים מעברי עכבר בשימוש תמונה אחת - rollovers...pixy-style 232 תפריט אופקי טכניקות חדשות ב- CSS הוספת צללית לטקסט חי עיצוב עמודות מעברי צבע -...gradients 239 ריבוי תמונות רקע מסגרות לתגיות פינות מעוגלות צל לתגיות "קופסה" מסגרות מעוצבות יצירת לשוניות (tabs) עם פינות מעוגלות CSS transform אנימציות ב- CSS תוכן עניינים 13

14 שינוי מצב שינוי מיקום טיפוגרפיה: עיצוב גופנים הטמעת גופנים זכויות יוצרים אופן ההטמעה תמיכה בדפדפן... Internet Explorer 257 דוגמה שלמה סיכום פרק :9 Jquery ו- Javascript מהי?Javascript התפקיד של Javascript בדף אינטרנטי דף Javascript הראשון שלך כיצד פועלת השפה...?Javascript 261 תחביר השפה... Syntax 262 אירועים, פונקציות, אובייקטים ומשתנים מודול אובייקט המסמך - DOM האובייקט החשוב - Document תחביר הנקודה קריאת נתונים והשמת נתונים סדר קריאת הקוד על ידי הדפדפן משתנים -...variables 267 הגדרה והצהרה של משתנים ערכי משתנים שרשור מספרים למחרוזות התניות וה ש מוֹת ריבוי התניות שיטות בדיקה הוראת התנאי... if 270 ההוראה - this מי אני? פונקציות מובנות שימושיות הפונקציה המובנית getelementbyid(""); הפונקציה המובנית...substring 271 הפונקציה המובנית... indexof 272 HTML5 מהד' 2 14

15 פונקציות ואירועים החלפת קובץ התמונה בלחיצה עליה שלב ראשון - תמונה אחת שלב שני - שתי תמונות החלפת תמונה גדולה בהתאם למעבר עכבר מעל תמונה קטנה שינוי טקסט בדף האובייקט... Style 277 הצגה והסתרה של שכבה בלחיצה על אובייקט בדף כיווץ - מיניפיקציה,... minification 279 ספריות...(Javascript libraries) Javascript 280 הספריה...JQuery 280 התקנת הרכיב המרכזי להרצת...JQuery 280 כתיבת הקוד הראשון שלך ב- JQuery האירוע... document.ready 281 סימן הדולר מציאת אובייקטים על המסך שרשרת הוראות... Chaining 285 שינוי תוכן בעמוד שינוי ערכים של מאפיינים מניפולציות על...CSS 286 אירועים הופעה איטית והיעלמות איטית של אובייקטים - Fade שימוש ב- JQuery קיים מהרשת קטעי CSS מוכנים ומסגרות קוד... CSS Snippets, Frameworks 290 סיכום פרק 10: שילוב מדיה והאובייקט Canvas שילוב סרטונים ב- HTML שליטה על אובייקט video באמצעות...Javascript 296 שילוב שמע ב- HTML תגית audio ב- HTML התגית... Canvas 298 הכרת התגית, דפדפנים תומכים, מטרה הוספת התגית למסמך הגדרת גודל הקנבס תוכן עניינים 15

16 כתיבת הקוד הראשון בקנבס:...hello world 301 תכנות בסיסי של התגית <canvas> מערכת הקואורדינטות המאפיינים המרכזיים של...canvas 303 הפונקציות המרכזיות של...canvas 303 זיהוי תמיכה בקנבס תכנות בתוך הקוד שתומך בקנבס מהו הציור על הקנבס? אפשרויות הצביעה ב- API ב-... 2D 305 ציור מלבנים ציור קווים ציור משולשים על הקנבס ציור טקסטים צורות מורכבות: קשתות ונתיבים ציור עיגולים על משטח העבודה... canvas 313 עקומות הכרת המצב (state) של משטח העבודה יצירת צל הצגת תמונות בקנבס מסכות - paths... clipping 319 טרנספורמציות -...transformations 321 שינוי גודל הצורה -...scale 321 סיבוב הצורה -...rotate 322 אנימציות אנימציות יעילות עם...double buffering 326 סיכום פרק 11: נושאים מתקדמים API מה הקשר בין API לבין...?HTML5 327 מיקום גיאוגרפי - Geolocation כיצד פועלת התכונה?Geolocation קוד בסיסי ליצירת תוכנית משולבת...Geolocation 330 אחסון מקומי - storage...local 333 לשם מה לשמור את הנתונים בדפדפן? דוגמאות למשתמשים בשמירה מקומית HTML5 מהד' 2 16

17 דוגמה הלוגיקה לשמירת מצב החלק המרכזי של הקוד סיכום File API drag and drop גרירת קבצים מהמחשב האישי אל חלון הדפדפן תמיכת דפדפנים ההסבר הטכני:... File API 339 דוגמה לקוד שעושה שימוש ב-...File API 340 סיכום פרק 12: מובייל ורספונסיביות אשליית הרוחב אתר נפרד מותאם למובייל הבאז סביב המושג Responsive Design (עיצוב מגיב) גדלים שונים של מסכים קיימים שיקולים טכניים ומגבלות היסודות הדרושים לאתר רספונסיבי הגדרת Viewport (מעין קנה מידה) איך שולטים על ה- viewport? הפרמטרים השולטים על ה- Viewport פרמטרים נוספים של...Viewport density צפיפות פיקסלים במסך media queries - Breakpoints נקודות עצירה performance שיפור ביצועים הדף הרספונסיבי הראשון שלך סיכום: הדף הרספונסיבי הראשון שלך שימוש במסגרת קוד -...framework JQuery Mobile התקנה ויצירת framework משלך הגדרת section ("דף") ב-... JQuery Mobile 368 כפתורים, קישורים, מעברים, אייקונים כפתורים וקישורים Themes עיצוב הממשק סמלים (אייקונים) תוכן עניינים 17

18 - Listview רשימות ואנימציות - מעברים בין דפים מחוות (gestures) ומעברים (transitions) סיכום אינדקס HTML5 מהד' 2 18

19 הקדמה ספר זה נכתב על ידי רושו יונית, בעלת ניסיון של כעשור בהוראה בתכנות מערכות אינטרנטיות ואתרי אינטרנט בטכנולוגיות XHTML ו- HTML5 במחלקה להנדסת תוכנה ובמסלול לעיצוב אינטראקטיבי בשנקר, כמו כן במחלקה לניהול מערכות מידע באקדמית של תל אביב יפו ובמכון הטכנולוגי חולון. הצלחת הסטודנטים על פי שיטת לימוד מוגדרת היטב ועקבית, תרמה ליוזמה לריכוז החומר ולכתיבת הספר הזה. במהלך הלימוד בספר מנסה יונית להקפיד, עד כמה שניתן, על תהליכים מוגדרים וברורים, עבודה יעילה וקוד איכותי, ולהדגיש גם את החשיבות של יעילות הקוד. הרי לא די בכך שהאתר פועל או "עובד" - הוא צריך לשרת באופן מקצועי, יעיל ולהיות בעל משמעות. הספר מצייד אותך בכלים תיאורטיים ומעשיים להבנת רשת האינטרנט, לתכנון ולבנייה של אתרי אינטרנט בשפה,HTML5 ביחד עם שפות נלוות כ- JavaScript ולעבודה עצמאית, החל בשלב הגדרת הצרכים ועד להגשת המוצר הסופי. אתה תכיר וגם תבין את הטכנולוגיה במהלך הלימוד של הטקסט והדוגמאות, ולא פחות חשוב - תוך כדי התנסות בפתרון תרגילים. עם סיום הלימוד במהדורה השנייה של הספר תוכל לבנות אתרי אינטרנט, מערכת מידע מבוססת Web ויישומים למכשירים ניידים (מובייל) בשפת,HTML5 תוך שימוש בטכנולוגיות מתקדמות, לצורך בנייה מקצועית ונקייה, משולבת מדיה, אינטראקטיב וקוד. הספר מתייחס הן למסך הרחב והן למסך הצר של מובייל.,HTML5 בשונה מגירסאות קודמות, יותר סלחנית בנושא קידוד, אבל עדיין זה לא נכון לעבוד בצורה לא אחידה. עוד על כך תוכל למצוא בספר Complete",Code מדריך מעשי לפיתוח תוכנה", שיצא בהוצאת הוד-עמי. מבנה הספר לאורך הספר תמצא תרגילים ברמות שונות. לכל התרגילים יש פתרונות. שים לב, לכל תרגיל יש דרכי פתרון שונות. בפתרונות יש גיוון בבחירות הדרכים ואופני הפתרון, כדי לספק לך דוגמאות מגוונות, אולם זכור שיש פתרונות נוספים שיכולים להיות טובים גם הם. בפתרונות יש הקפדה על מינימליזם בקוד, ועל קוד יעיל ואפקטיבי. הפרק העוסק בטפסים משמש כסדנת עבודה, בה בכל שלב של הלמידה מרחיבים את הטופס שבונים ביחד. הספר מחולק לשני חלקים עיקריים: פרקים 1 עד 7 מכסים את כל הנושאים הרלוונטיים להעלאת אתר מקצועי לאוויר. פרקים 8 ואילך עוסקים בנושאים מורכבים שיאפשרו לך לשדרג את הידע שלך ולהפוך את האתר לאינטראקטיבי בעזרת מדיה, קוד, איתור מיקום הגולש, מתן אפשרות לגרירת קבצים לחלון הדפדפן ועוד. הקדמה 19

20 קהל היעד בין אם אתה שואף לדעת לבנות אתר והנך ללא ניסיון או ידע בתחום, ובין אם אתה מנוסה ובקיא בגרסאות קודמות של שפת בניית האתרים,HTML תוכל למצוא בספר זה את התשובות שחיפשת. הספר כולל פרק מבוא המתאר מושגים בסיסיים הכרחיים להבנה, ובמהלך הספר טיפים למי שעבד בגרסאות קודמות. הספר מסיים ברמה מאוד גבוהה של התממשקות ל- API מורכבים, מדיה, תגית הקנבס המפורסמת ובניית אתר רספונסיבי. קטעי הקוד ניתן להוריד את כל קבצי הקוד ב- html ו- css והפתרונות הקיימים מאתר האינטרנט של הוצאת הוד עמי: בנוסף לקטעי הקוד תמצא בקובץ שייפתח גם קבצי תמונות של מסכים שנמצאים בספר. מכיוון שהספר מודפס ללא צבעים תוכל להיעזר במסך המקורי כדי לראות כיצד הוא נראה עם צבע. מצא את הספר באתר ואת הלינק "קוד מקור" להורדת הקבצים. לחץ עליו ועקוב אחר ההוראות. אם לא תגדיר אחרת, יועתקו הקבצים אוטומטית לדיסק שלך, לתיקייה זו: C:\HodAmiBooks\59463\ תוכל לבחור בעת ההתקנה בכל תיקייה אחרת. לאחר שתוריד את הקבצים מאתר הוד-עמי הם יימצאו (אם לא שינית) בתיקיה שנמצאת תחת HodAmiBooks שנמצאת בכונן C. בספר נתייחס לתיקיית ברירת המחדל הזו. בדרך כלל הפעולות שיש לבצע לאחר הלחיצה על הלינק: לחיצה על הפעל, לחיצה על,UnZip לחיצה על OK ו- Close. על יונית רושו מהנדסת תוכנה, בעלת תואר שני במנהל עסקים ודוקטורנטית בחוג לניהול מידע וידע בטכנולוגיות אינטרנט באוניברסיטת חיפה, בעלת ניסיון מעשי של מעל 15 שנים בבניית אתרים ומערכות ווביות לחברות הייטק בארץ. מרצה ל- HTML5, לתכנות ווב ולעיצוב ממשקים ומסכים במחלקות להנדסת תוכנה, לניהול מערכות מידע ולתקשורת חזותית ב'שנקר', באקדמית של תל-אביב יפו ובמכון הטכנולוגי חולון. כתבה את מדורי טרנדי באתר 'נענע 10 ' ו-'ניצוצות ברשת' באתר 'הארץ', על מגמות בעיצוב ובטכנולוגיה ברשת. ייסדה, ניהלה ומכרה את 'דיינמיק-ווב', חברה לבניית אתרים ואפליקציות ווב. אני מעודדת אותך לקרוא, להתנסות ולחקור מתוך מטרה להגיע לרמה בינלאומית מקצועית. יונית. HTML5 מהד' 2 20

21 מאפיינים (attributes) מוגדרים תמיד בתגית הפתיחה בלבד. אם צריך להגדיר יותר ממאפיין אחד, הם יוגדרו זה אחר זה, ללא חשיבות לסדר הכתיבה שלהם. כמובן, לפי הנוסחה שלמעלה, יש לזכור שלפני כל מאפיין יש לכתוב את התו 'רווח'. התבונן בקוד,exercise_2.8.html על אף שאינך מכיר עדיין את התגיות ולא יודע מה משמעותן, תוכל לזהות את המאפיינים, אשר מודגשים ברקע אפור: <!DOCTYPE html> <html> <head> <title>attributes</title> </head> <body> <section> <img src="logo.jpg" alt="cats" title="cats"> <br> <a href="about.html">about us</a> </section> </body> </html> בהמשך הלימוד תכיר ותבין את משמעות המאפיינים הללו. התוצאה אינה מוצגת כי עכשיו חשוב להבין מה מאפיין וכיצד כותבים אותו. תוכל לראות שלפני כל מאפיין יש רווח, לאחריו יש סימן שוויון (=), ולאחריו רשום הערך שלו כשהוא תחום בגרשיים. כך תוכל לראות שהנוסחה תמיד מתקיימת: רווח 'שם' שווה 'ערך' שרשום בין גרשיים. סיכום: התקניות הנדרשת במסמכי HTML5 בכתיבת קוד HTML5 חשוב להקפיד על החוקים ולפעול על פי התקנים שנקבעו, למניעת תצוגה שונה על מסכים שונים, דפדפנים שונים ומערכות הפעלה שונות. גרסאות שונות של דפדפנים שונים מחמירות באופן שונה בכתיבת התגיות והמאפיינים, ועל כן התצוגה הסופית משתנה מדפדפן לדפדפן. הקפדה על התקניות המומלצת בספר זה תסייע למניעת פערי תצוגה בין דפדפנים שונים. בנוסף לקריאה נוחה וכמובן, למען הסדר הטוב. יש סיבות נוספות לצורך בהקפדה על "החוקים" או לפחות לשמירה על כללים עקביים ומסודרים בעת כתיבה של מסמך.HTML5 שפת,HTML5 כלומר הגרסה החדשה, אינה נוקשה בכלליה כפי שהיה בגרסאות קודמות. להלן נלמד על כמה מהחוקים החשובים ונחשף להמלצות לשמירה על סדר וחוקיות. HTML5 מהד' 2 44

22 אם יש לך ידע קודם ב- XHTML, אתה ודאי מקפיד על כך שתהיינה תגיות <head> ו-,<body> וכל תגית חייבת להיסגר. שפת HTML5 אינה מקפידה על חוקיות זו. למעשה, HTML5 מאפשרת להשאיר חלק מהתגיות פתוחות ולא לסגור אותן, כמו למשל תגית הפ סקה. גם אין חובה להשתמש בתגיות,<html>.<body>,<head> מנוסה בגרסאות קודמות של?HTML מי שרגיל לשמור על התקניות של XHTML יתקשה מאוד לקבל את השינויים בתקניות הנדרשת במסמכי.HTML5 קח נשימה, תתרגל. כדי לבדוק אם הקוד שאתה כותב חוקי ותקני, אתה מוזמן להעלות את הקובץ שכתבת ושמרת אל אתר בכתובת:. התבונן בקוד.exercise_2.9.html שים לב לתגיות החסרות בו, לערבוב בין האותיות רגילות ורישיות, לכך שאין גרשיים סביב הערך של המאפיין, ועוד. קוד exercise_2.9.html נמצא תקני בבדיקת התקינות של :HTML5 <!DOCTYPE html> <head> <title>attributes</title> <meta charset=utf-8> <body> <SECTION> This is what it is. </section> תודה לכולכם< p > </body> למרות כל "השגיאות" כביכול האלו, על פי ההגדרות הלא נוקשות של,HTML5 הקוד תקני, והתוצאה גם מוצגת בדפדפן כראוי. לשם ההשוואה, הקוד הזה לא היה תקני בגרסאות קודמות של.HTML תרשים 2.11 פרק 2: יסודות ועקרונות שפת HTML(5) 45

23 עם זאת, על אף העובדה ש- HTML5 אינה מחייבת להקפיד על כללי הכתיבה, לשם האחידות אני מדגישה את החוקיות שרצוי לקיים: 1. מבניות -.Structure רצוי לחלק את המסמך לשני חלקים: לכותרת (head) ולגוף,</html> לבין תגית הסגירה <html> ולהכיל את שניהם בין תגית הפתיחה,(body) שנכתבות לאחר שורת ההצהרה.doctype.2 עריכה נכונה - :Well-formed תגיות שבאופן אינטואיטיבי אמורות להיסגר, רצוי לסגור, ולא להשאיר פתוחות. כגון: p,body,head ואחרות. קינון נכון - nested.properly יש להקפיד על כך שתגיות הסגירה תיסגרנה כמו בחוקיות הסוגריים במשוואה מתמטית, בהתאמה לפי סדר פתיחתן. 3. סוגי אותיות - sensitive.case מומלץ להקפיד על שימוש באותיות רגילות ("קטנות") בלבד, ולא לערבב אותיות רגילות ואותיות רישיות ("גדולות"). 4. רצוי לתחום כל תכונה של מאפיין בגרשיים ולהקפיד שכל התכונות תיכתבנה באותיות רגילות. אם יש ערך זהה לשם המאפיין, כדוגמת המאפיין החדש hidden="hidden" אפשר לכתוב hidden> <section בלבד. גם אם לא כל החוקים הרשומים בסעיף זה ברורים לך בשלב זה, אני בטוחה שעם ההתקדמות שלך בלימוד זה תכיר אותם ואת חשיבות השמירה עליהם. מנוסה בגרסאות קודמות של?HTML במהלך הלימוד בספר לא אסגור תגיות ריקות. כלומר, </ charset="utf-8" <meta או </ <br יוצגו ללא לוכסן בסוף תגית הסגירה, וזה בסדר. HTML5 מהד' 2 46

24 תרגיל 1 צור דף HTML הכולל את השלד, טקסטים ותווים מיוחדים כפי שלמדת, הכן מסמך HTML5 שייראה כפי שמוצג בתרשים 2.12: הפתרון נמצא בקוד.solution_2.1.html תרשים 2.12 פרק 2: יסודות ועקרונות שפת HTML(5) 47

25 3 תגיות המבנה החדשות פרק זה הינו אחד החשובים ללומד,HTML5 הן למתחיל והן למי שכבר התנסה בכתיבת דפי HTML בגרסאות קודמות. כאשר מפתחי השפה קבעו את ההגדרות שלה, הם לקחו בחשבון צרכים עכשוויים וחידושים טכנולוגיים עתידיים, ככל שיכלו להעריך אותם. אחד הצרכים שנלקח בחשבון הוא השימוש בתגיות בעלות משמעות ליצירת מבניות בדף הקוד. אם אתה בעל ניסיון בגרסאות קודמות, בוודאי תסכים שמספר תגיות <div> שהשתמשת בהן היה גדול וחסר כל משמעות. על כן, בפרק זה מרוכזות התגיות החדשות העיקריות ב- HTML5 שמטרתן לסייע ביצירת מבנה הדף, והוא כולל גם נושאים חשובים אחרים שיש לתת עליהם את הדעת בעת כתיבת דפי.HTML5 בפרק זה נבחן את הנושאים הבאים: <aside> התגית <header> התגית אזורים יעודיים <footer> התגית תגיות נוספות <section> התגית מודל התוכן של HTML5 <main> התגית <article> התגית <nav> התגית מנוסה בגרסאות קודמות של?HTML כל התגיות בפרק זה חדשות עבורך. בחלק האחרון של הפרק תמצא פירוט של מודל התוכן החדש של,HTML5 אשר מחליף את הגדרות block ו- inline שאתה מכיר. פרק 3: תגיות המבנה החדשות 87

26 תגיות חדשות ב- HTML5 ליצירת מבניות בעלת משמעות בפרק 6 תלמד על כך שדרושות תגיות מעטות ונדון במשמעות שלהן, ותלמד על החשיבות שהקנו לכך יוצרי ומפתחי השפה.HTML5 בפרק זה נבחן את התגיות החדשות של השפה. שים לב, אלו הן תגיות מבנה. הן יוצרות וקובעות את המבנה של הדף ואת המרכיבים העיקריים שלו. לפנינו אם כן, המקבילה לשלד של בניין. התגית <header> התגית <header> (כותרת עליונה) מגדירה בדרך כלל את האזור העליון של הדף, לעתים היא גם כוללת תפריט עליון אופקי, באנר, לוגו וכד'. התגית יכולה להכיל כמעט כל תגית אחרת למעט <header> ו-< footer >. מנועי החיפוש מודעים לכך, שתוכן שנמצא בתוך תגית זו חשוב, וזו סיבה מספיק חשובה שגם המשתמש, יוצר דף הקוד, יראה זאת כך. ניתן להגדיר יותר מתגית <header> אחת בדף. דוגמה לאופן השימוש בתגית תוכל לראות בקוד :exercise_3.1.html <!DOCTYPE html> <html> <head> <title>yonit</title> </head> <body> <header> <h1>profile Company</h1> <h2>goals</h2> </header> </body> </html> התגית <footer> התגית <footer> (כותרת תחתונה) מגדירה את החלק התחתון של הדף. באתרי אינטרנט, כלולים בה בדרך כלל קישורים שונים כמו לדוגמה, פרטי יצירת קשר וזכויות יוצרים. <footer>footer links</footer> באפליקציות Web רבות מופיע תפריט הניווט המרכזי של האפליקציה ב- footer, בשילוב סמלים, כמו בתרשים 3.1. בדרך כלל, הכותרת התחתונה נעלמת כשמתחילים לגלול, או לחילופין נשארת קבועה במקומה, וכל התוכן נגלל מאחוריה. HTML5 מהד' 2 88

27 הגדרת העיצוב בראש המסמך באופן גורף: התגית <style> את התגית <style> יש להגדיר בתוך התגית <head> שנמצאת בראש הדף ומיועדת עבור הגדרות המסמך כולו. בתגית זו יש לכתוב את העיצוב באופן הבא - קוד :exercise_4.4.html <!DOCTYPE html> <html> <head> <title>css</title> <style> a { color: white; background-color: black; margin-left: 5px; } </style> </head> <body> <nav> <a href="index.html">home Page</a><br> <a href="about.html">about</a><br> <a href="vision.html">vision</a><br> <a href="contact.html">contact</a> </nav> </body> </html> כעת ננתח את ההוראות שנמצאות בקוד.exercise_4.4.html התגית <style> מוגדרת בתוך התגית.<head> בתוכה כתוב שם של תגית הקישור a, ללא סימון המשולשים < >. מה פירוש הדבר? כשהדפדפן סורק את המסמך ופוגש בתגית <style> הוא "מבין" שכעת יופיעו הגדרות עיצוב למסמך כולו, בין תגית הפתיחה לבין תגית הסגירה. הגדרות העיצוב הללו מופיעות בצורת שם התגית שעליה יחולו ההגדרות שרשומות לאחר שם התגית בין הסוגריים המסולסלים. כאמור, אין <...> סביב שם התגית וזהו ההבדל מהגדרת תגית ב- HTML לבין הגדרת עיצוב לתגית ב- CSS. HTML5 מהד' 2 114

28 כפי שתוכל לראות בקוד,exercise_4.4.html יש בין הסוגריים המסולסלים הפותחים והסוגרים כמה זוגות של הגדרות עיצוב: צבע: לבן; white; color: צבע רקע: שחור; black; background-color: שוליים-שמאליים: 5 פיקסלים; 5px; margin-left: שים לב שבסוף כל שורה יש נקודה-פסיק מכיוון שבכל שורה יש זוג נתונים הכוללים את סוג המאפיין ואת הערך שלו. בין כל זוג נתונים כותבים נקודה-פסיק (;). אחרי הנקודתיים יש רווח, ואין גרשיים כדי לתחום את ערך המאפיין. בתגית <body> מוגדרות ארבע תגיות מסוג <a>. דוגמה זו מראה כיצד ארבע תגיות קישורים מקבלות את הגדרות העיצוב שהוגדרו באופן גורף לכל תגיות <a>. התוצאה, כפי שתוכל לראות בתרשים 4.4 היא, שכל התגיות <a> שבתוך <body> יוצגו על פי הגדרות העיצוב הכלליות שהוגדרו לקישורים, מבלי שהיה צריך להגדיר מאומה "בשורה" (Inline) של התגית ב- HTML. תרשים 4.4 הבעיה בשיטת תגית <style> אם כן, פתרנו את הבעיה של ריבוי הגדרות עיצוב בשורות התגית של,HTML אך יש בעיות גם בבחירת אפשרות זו. בעיה ראשונה היא, שיש עומס קוד בתחילת הדף. באתר גדול עם הגדרות עיצוב רבות, יכולות להיות עשרות שורות של זוגות הגדרות בתחילת מסמך הדף. עומס זה פוגע ביעילות, מכיוון ששורות הקוד אינן מכווצות,minification בסדר של הקוד בדף בגלל ריבוי שורות מיותרות בתחילתו, וכן בקריאתו על ידי מנועי החיפוש העיקריים. מנועי החיפוש סורקים את הקוד ומחפשים תוכן שמופיע בתגית,<body> אך בגלל כל הגדרות העיצוב המופיעות ב-< head > יש שורות רבות לפני התגית,<body> והדבר עלול לפגוע בקידום האתר ובביצועים שלו. עוד על כיווץ (minification) תמצא בפרק 9. פרק 4: הגדרות עיצוב על ידי 115 CSS

29 7 טפסים ב- HTML5 הטופס הוא נושא מרכזי וחשוב ב- HTML5. סביר להניח, שאתה משתמש בטופס בכל פעם שאתה מזין שם משתמש וסיסמה כדי להתחבר לחשבון Gmail שלך, או בכל פעם שאתה רוכש מוצר בחנות מקוונת באינטרנט וממלא לשם כך פרטים אישיים, בכל פעם שאתה נרשם למועדון לקוחות באתר כלשהו, ולפעמים אפילו כשאתה מדרג מאמר או שירות מסוים. הטופס מאפשר ליצור אינטראקציה בין הגולש לבין השרת, וב- HTML5 הוא עבר שדרוג משמעותי. בפרק זה נלמד כיצד תהליך זה מתבצע וכיצד לבנות ולנהל טפסים חכמים ב- HTML5. פרק זה משלב תרגול רב כדי להקל עליך ללמוד את החומר. במהלך הפרק נלמד ונכיר את חלקי הטופס השונים וגם נבנה טופס הצטרפות למועדון לקוחות. לבסוף, נציג את הטופס הן במסך המחשב והן במכשיר הנייד. כל הקוד של פרק זה נמצא בקובץ.form.html בפרק זה תלמד: פקדי מספר מהו הטופס ומה מטרתו פקדי בחירה טפסים ב- HTML5 מיקום סמן בתוך שדה מסוים לאן נשלחים הנתונים מתוך הטופס שדות חובה סדנת עבודה הגדרת טקסט ברירת מחדל לשדה תגית הטופס ניהול המידע הפקדים הבסיסיים: פקד תיבת טקסט השלב הבא ופקד שליחת הנתונים פקדי טקסט נוספים פרק :7 טפסים ב - HTML5 185

מהו הטופס ומהי מטרתו? טופס שמוצג באתר אינטרנט או ביישום אינטרנטי, מאפשר למשתמש ליצור תקשורת דו- כיוונית עם האתר. הטופס נועד לאימות, להוספה, לשינוי ולמחיקה של נתונים.

30 מהו הטופס ומהי מטרתו? טופס שמוצג באתר אינטרנט או ביישום אינטרנטי, מאפשר למשתמש ליצור תקשורת דו- כיוונית עם האתר. הטופס נועד לאימות, להוספה, לשינוי ולמחיקה של נתונים. פעולות אלו מתבצעות על ידי שליחת נתונים אל השרת, כפי שתראה בהמשך הלימוד בפרק זה. תרשים 7.1 מציג את טופס ההתחברות ל- Gmail. תרשים 7.1 גם חיפוש מידע ב- Google (גוגל) מתבצע על ידי תבנית טופס. ראה תרשים 7.2: תרשים 7.2 הצטרפות למועדון לקוחות, רכישת מוצרים בחנות מקוונת ברוב המקרים על ידי טפסי אינטרנט: ופעולות רבות אחרות, נעשות HTML5 מהד' 2 186

31 9 ו- Javascript JQuery מקובל לומר שמעצב אתרים ואפליקציות מקצועי צריך להכיר טכנולוגיות, ושבונה אתרים ואפליקציות מקצועי צריך להבין עיצוב. בימינו, כדי להצליח לאפיין, לעצב ולבנות אתר אינטרנט, אפליקציה או מערכת מידע אינטרנטית מוצלחים, צריך להכיר הן את היכולות שמאפשרת לך הטכנולוגיה והן את המגמות, הכיוונים או הטרנדים, ואת האינטראקטיביות Javascript כדי HTML5 מצפה ממך להיעזר בכתיבת קוד שהמעצב חולם עליהן. שפת גרירת קבצים לתוך חלון ציורים על הקנבס,(Canvas) צלילים, לשלוט על סרטונים, הדפדפן ועוד. את כל אלה תכיר בפרקים הבאים, אולם כדי שתוכל להבין ולבצע, עליך להתנהגות המהווה את היסוד ל- JQuery,,Javascript השפה תחילה את להכיר אינטראקטיבית דינאמית ועוד. בפרק זה תלמד היכן לשלב קוד Javascript במסמכי,HTML5 כיצד קוד Javascript נראה ומתי משתמשים ב- Javascript. תראה דוגמאות ומשם תמשיך להכרת הספריה JQuery העוצמתית וללמידת אופני השימוש בה. בפרק זה תתחיל מהבסיס ותתקדם לכתיבת קוד מקצועי הן ב- Javascript והן ב- JQuery, תוך התנסות ולמידה גם של נושאים נבחרים משיקים. בפרק זה נבחן את הנושאים הבאים: סדר קריאת קוד על ידי הדפדפן?Javascript מהי אירועים, פונקציות, אובייקטים ומשתנים דף Javascript הראשון שלך פונקציות מובנות שימושיות מודול אובייקט המסמך - DOM מציאת אובייקטים על המסך קריאת נתונים והשמת נתונים סימן הדולר Style האובייקט JQuery תחביר השפה CSS מניפולציות על מידע נוסף על Javascript תוכל למצוא בספר "סדנת לימוד "Javascript שיצא בהוצאת הוד-עמי. פרק : 9 JQuery ו Javascript- 259

32 הדפדפנים השונים תומכים בקבצים מסוג mp3 ו- ogg. ניתן להמיר את קבצי mp3 לקבצי ogg באמצעות תוכנות לעריכת מוסיקה ובאמצעות כלים שנמצאים ברשת, כמו :exercise_10.4.html קוד. <audio controls> <source src="sounds/1.mp3" type="audio/mp4"> <source src="sounds/1.ogv" type="audio/ogg"> no support </audio> קוד Javascript מאפשר שליטה על אובייקט שמע (אודיו) בדומה לשליטה על אובייקט וידאו. התגית Canvas הכרת התגית, דפדפנים תומכים, מטרה התגית Canvas (קנבס) והטכנולוגיה הנלווית לה הן אחד החידושים המשמעותיים ביותר ב- HTML5. רבות נטען ש- HTML5 מחליפה את השימוש בטכנולוגיית Flash לתכנות משחקים, אנימציות, גרפים ודיאגרמות אנימטיביות ועוד. ואמנם, אחת הסיבות לטענה זו היא השימוש בתגית.<canvas> התגית קנבס <canvas> </canvas> מספקת משטח עבודה (ומכאן שמה) לאיור צורות, תמונות, טקסטים ועוד. ההצלחות הבולטות של הקנבס: אינטראקטיביות - הקנבס מגיב לאירועים שהמשתמש יוזם, כמו מעבר עכבר, לחיצת עכבר ועוד. אנימטיביות - ביחד עם האינטראקטיביות, אלו שתי התכונות שמאפשרות לתכנת משחקים בקנבס במקום בפלאש. כל צורה שאתה מצייר על הקנבס אתה יכול להנפיש. תמיכה נרחבת בדפדפנים - אמנם תראה כיצד לזהות אם הדפדפן תומך בקנבס, אבל כיום רוב הדפדפנים תומכים בו. פופולריות - קהילות מתכנתים מציגות לראווה דוגמאות מורכבות, מעוצבות, מדהימות. אני ממליצה לך להתרשם מהכמות העצומה של דוגמאות מרהיבות של מתכנתים ומעצבים באתר. במסגרת פרק זה נעסוק בגרפיקה דו-ממדית, אבל כדאי לדעת שקיימת תמיכה נרחבת גם בגרפיקה תלת-ממדית, כפי שיוסבר בהמשך. דפדפנים שאינם תומכים בתגית,<canvas> HTML5 מהד' 2 298

33 מציגים טקסט מחליף כפי שנקבע להם. ניתן להגדיר יותר מתגית <canvas> אחת בדף והתגיות עשויות לחפוף זו את זו. חשוב לדעת שכל מה שמאויר, משורטט או נכתב - ולמעשה מוצג במשטח העבודה קנבס - לא נשמר בשום מקום על ידי הדפדפן. כלומר, אם אתה מצייר משהו בקנבס וסוגר את הדפדפן, תצטרך לערוך את הציור מחדש בפעם הבאה שתרצה להציגו. זאת בניגוד לצורה שמוגדרת באובייקט,SVG עליו לא נרחיב בפרק זה. לכן, טכנולוגיית קנבס מתאימה להצגה חד-פעמית של גרפיקה, ואינה מתאימה כאשר צריך להשתמש בתוכן המוצג שוב ושוב. התוכן שמוצג במשטח העבודה אינו חלק מהדף, אלא נוצר על ידי הקוד כתצוגה חולפת, on.the fly בכל פעם שתפתח את העמוד יופעל הקוד שמצייר על הקנבס, אך לא תישמר הנקודה האחרונה שצוירה. הקוד יתחיל לצייר מההתחלה. הוספת התגית למסמך כל משטחי העבודה שקופים בתחילה. ניתן להגדיר יותר ממשטח עבודה אחד בדף והמשטחים יכולים לחפוף זה את זה. כמתחיל, הגדר תחילה משטח עבודה אחד ופעל בו, ואחר כך הוסף משטח ופעל גם בו בדרך דומה. אם לא תגדיר את גודל משטח העבודה, הוא יוצג בגודל ברירת המחדל: רוחב 300 פיקסלים, גובה 150 פיקסלים. להלן דוגמת שימוש בתגית - קוד :canvas_10.1.html <canvas> Fallback Content </canvas> שים לב, מספרי הקודים בחלק זה של הפרק ממוספרים בנפרד עם המילה canvas בהתחלה, לצורך ההפרדה בין ההסבר על סרטונים ואודיו לבין החלק שעוסק בתגית.<canvas> הדפדפן קורא את התגית, ומציג את מה שכתוב בקוד, כפי שתלמד בהמשך. אם הדפדפן מגרסאות קודמות ואינו תומך בתגית קנבס, יוצג בו הטקסט הכתוב בין תגית הפתיחה לבין תגית הסגירה. בדוגמה הקודמת canvas_10.1.html יהיה כתוב.Fallback Content תגית זו אינה מציגה דבר והדף נשאר לבן וריק. לכן, נוסיף מעט הגדרות עיצוב ב- CSS. להזכירך, כשיש ב- CSS הגדרות עיצוב שמתייחסות לתגית באופן כללי, כותבים תחילה את שם התגית ולאחריה את הגדרות העיצוב שמשויכות אליה: canvas { border: solid black 1px; } פרק 10: שילוב מדיה והאובייקט 299 Canvas

34 12 מובייל ורספונסיביות אחד האתגרים בעיצוב ובפיתוח אתרים ומערכות אינטרנטיות, הוא הצורך בתמיכה נרחבת בסוגים ובגדלים שונים של מכשירים. למכשירים שונים יש רזולוציות וגדלי מסך שונים, עובדה היוצרת אתגר לא פשוט כאשר עומדים לבנות אתר אינטרנט שייראה אופטימלי בכל מכשיר מבחינת תוכן, התנהגות, פונקציונליות ונ ראוּת. קיימים מסכים ענקיים ולחילופין, מסכים קטנים. אין זה הגיוני וגם לא יעיל לתכנן, לעצב ולתכנת בנפרד לכל מכשיר, לכל רזולוציה ולכל מסך. יש מספר פתרונות לעשות זאת פעם אחת עבור מכשירים רבים, כפי שנסקור בפרק זה. הפתרון המקובל הוא בשיטת רספונסיביות. בפרק זה תכיר את שיטת ה- breakpoints (נקודות עצירה) של Media Queries וגם תבנה את הדף הרספונסיבי הראשון שלך. הערה: Media Queries הוא מודול CSS3 אשר מאפשר לתכנים שונים להתאים את עצמם למכשירים שבהם מאפייני מסך שונים, כמו למשל מסך של טלפון סלולרי לעומת מסך של טאבלט או מחשב. שיטה זו הפכה לתקן מומלץ של W3C ביוני זוהי אבן יסוד בטכנולוגיה של עיצוב אתרים רספונסיבי - RWD - Responsive Web Design) עיצוב אתרים מגיב). בפרק זה נבחן את הנושאים הבאים: אתר תואם למובייל אשליית רוחב שיקולים טכניים ומגבלות אתר רספונסיבי צפיפות Viewport JQuery Mobile Media queries פרק 12: מובייל ורספונסיביות 343

אשליית הרוחב לא פשוט לתמוך ברחבים וברזולוציות שונות של מסכים. מכיוון שכך, אתרים רבים מסתפקים בהתאמת המסך לרוחב של 1000 פיקסלים, שהוא רוחב קבוע ממורכז בדפדפן.

35 אשליית הרוחב לא פשוט לתמוך ברחבים וברזולוציות שונות של מסכים. מכיוון שכך, אתרים רבים מסתפקים בהתאמת המסך לרוחב של 1000 פיקסלים, שהוא רוחב קבוע ממורכז בדפדפן. השוליים נצבעים בצבע או בתבנית כלשהי והכותרות העליונה והתחתונה של הדף,header) (footer ברוחב כל המסך הזמין לצופה בדפדפן. בצדדים הפנויים מתוכן הדף ניתן להוסיף באנרים שונים, קישורים לרשתות חברתיות, פרסומות ומידע אחר. כתוצאה, במסך צר רואים רק את מה שנמצא באזור התוכן שנמצא בגבולות ה פיקסלים. לעומתו, במסך רחב בעל רזולוציה גבוהה רואים גם את כל המידע שנמצא בשוליים. לדוגמה, באתר של "הארץ" (תרשים 12.1) רואים בשוליים את המשך החלק העליון של הדף. פתרון זה יוצר תעתוע של ניצול הרוחב המלא של המסך. זהו פתרון נוח וקל ליישום, אך אינו תחליף לאתר רספונסיבי אמיתי, מכיוון שאינו פותר את הנראות במסכים שצרים מ פיקסלים, ואינו משנה בהם את התוכן ואת ההתנהגות בהתאם. תרשים 12.1 HTML5 מהד' 2 344

36 אתר נפרד מותאם למובייל להבדיל מהשיטה הקודמת, בה עושים שינויים מינוריים באתר הקיים, לצורך יצירת אשליית הרוחב, בשיטה הנוכחית בונים אתר אינטרנט שלם בנפרד, במיוחד עבור המסך הצר. באתרים שמותאמים למכשירים ניידים, הקוד מזהה אוטומטית שהגלישה נעשית באמצעות מכשיר נייד (מובייל), ומפנה אותו אל אתר תואם שגם יכול להיות בדומיין שונה. כך לדוגמה, האתר התואם של הוא:.m.gap.com אתר נפרד זה יכול לחלוק את אותו התוכן ובסיס הנתונים עם האתר הראשי. מבחינת נראות, האתר התואם הוא בעל מאפיינים דומים לאלה של האתר הראשי, וביניהם צבעים, לוגו, סגנון עיצוב ועוד. עם זאת, האתר הזה מותאם לגלישה בנייד בהתאם לכללים המקובלים לעיצוב ולחוויית משתמש במסך הצר. תרשימים 12.2 ו מציגים את אתר עיתון "הארץ" ואת אתר WIRED בשתי תצוגות שונות למרות שהתוכן זהה: גרסה שמתאימה למסך הרחב וגרסה שמתאימה למכשיר מובייל. יש אתרים שנוהגים לשאול את המשתמש אם הוא מעוניין לעבור לאתר המותאם למובייל ולהשתמש באפליקציה native לצורך זה, או שברצונו להישאר באתר הרגיל. דרך פעולה זו, שבה הגולש צריך להבין מה שואלים אותו, לנתח מה היתרונות של המעבר לגרסת המכשיר הנייד או עבודה בגרסת המחשב - הינה לא ברורה, מייגעת ומטרידה עבור רוב הגולשים. כדי להימנע מטורח זה, נבנה האתר הרספונסיבי אשר מתאים את עצמו אוטומטית, והגולש אינו מודע לבעיית השוני בין המכשירים שהוא פועל בהם. המשתמש צופה באופן אוטומטי בתכני האתר בדרך הטובה ביותר עבורו, בהתאם לרוחב המסך של המכשיר שהוא פועל בו באותו זמן. פרק 12: מובייל ורספונסיביות 345

HTML5 םירתא תיינבל ךירדמה אבה רודה ושור תינוי

HTML5 םירתא תיינבל ךירדמה אבה רודה ושור תינוי HTML5 המדריך לבניית אתרים הדור הבא יונית רושו יועץ מקצועי: זהר עמיהוד עריכה ועיצוב: שרה עמיהוד, יצחק עמיהוד עיצוב עטיפה: אופיר ליברמן שמות מסחריים שמות המוצרים והשירותים המוזכרים בספר הינם שמות מסחריים